import { VantComponent } from "../common/component";
import { useChildren } from "../common/relation";
import { addUnit, getRect, getSystemInfoSync } from "../common/utils";
let ARRAY = [];
VantComponent({
	field: true,
	classes: ["title-class"],
	relation: useChildren("dropdown-item", function () {
		this.updateItemListData();
	}),
	props: {
		activeColor: {
			type: String,
			observer: "updateChildrenData"
		},
		overlay: {
			type: Boolean,
			value: true,
			observer: "updateChildrenData"
		},
		zIndex: {
			type: Number,
			value: 10
		},
		duration: {
			type: Number,
			value: 200,
			observer: "updateChildrenData"
		},
		direction: {
			type: String,
			value: "down",
			observer: "updateChildrenData"
		},
		safeAreaTabBar: {
			type: Boolean,
			value: false
		},
		closeOnClickOverlay: {
			type: Boolean,
			value: true,
			observer: "updateChildrenData"
		},
		closeOnClickOutside: {
			type: Boolean,
			value: true
		}
	},
	data: {
		itemListData: []
	},
	beforeCreate() {
		const { windowHeight } = getSystemInfoSync();
		this.windowHeight = windowHeight;
		ARRAY.push(this);
	},
	destroyed() {
		ARRAY = ARRAY.filter(item => item !== this);
	},
	methods: {
		updateItemListData() {
			this.setData({
				itemListData: this.children.map(child => child.data)
			});
		},
		updateChildrenData() {
			this.children.forEach(child => {
				child.updateDataFromParent();
			});
		},
		toggleItem(active) {
			this.children.forEach((item, index) => {
				const { showPopup } = item.data;
				if (index === active) {
					item.toggle();
				} else if (showPopup) {
					item.toggle(false, { immediate: true });
				}
			});
		},
		close() {
			this.children.forEach(child => {
				child.toggle(false, { immediate: true });
			});
		},
		getChildWrapperStyle() {
			const { zIndex, direction } = this.data;
			return getRect(this, ".van-dropdown-menu").then(rect => {
				const { top = 0, bottom = 0 } = rect;
				const offset = direction === "down" ? bottom : this.windowHeight - top;
				let wrapperStyle = `z-index: ${zIndex};`;
				if (direction === "down") {
					wrapperStyle += `top: ${addUnit(offset)};`;
				} else {
					wrapperStyle += `bottom: ${addUnit(offset)};`;
				}
				return wrapperStyle;
			});
		},
		onTitleTap(event) {
			const { index } = event.currentTarget.dataset;
			const child = this.children[index];
			if (!child.data.disabled) {
				ARRAY.forEach(menuItem => {
					if (menuItem && menuItem.data.closeOnClickOutside && menuItem !== this) {
						menuItem.close();
					}
				});
				this.toggleItem(index);
			}
		}
	}
});
